import '../style.scss'
import * as anime from 'animejs'
import { browserSystem } from './platform'
import config from './config';
import * as Hammer from 'hammerjs'

var DOM = {
  icon: document.querySelectorAll('.icon') as NodeListOf<HTMLImageElement>,
  name: document.querySelectorAll('.game-name') as NodeListOf<HTMLElement>,
  desc: document.getElementById('desc'),

  slides: document.querySelector('#slides'),
  balls: document.querySelectorAll('.indexes .ball'),
  clickHere: document.querySelectorAll('.click-here-txt'),
  clickHereAdd: document.querySelector('.click-here-add-txt'),
  clickHereAdd2: document.querySelector('.click-here-add2-txt'),
  txtComplete: document.querySelectorAll('.txt-complete'),
  topUrl: document.querySelectorAll('.top-url') as NodeListOf<HTMLElement>,
  ios: {
    bg: document.querySelectorAll('.ios.bg') as NodeListOf<HTMLImageElement>,
    sliders: document.querySelector('.ios.sliders') as HTMLElement,
  },
  android: {
    bg: document.querySelectorAll('.android.bg') as NodeListOf<HTMLImageElement>,
    sliders: document.querySelector('.android.sliders') as HTMLElement,
  }
}

var data = JSON.parse(decodeURIComponent(location.search.split('=')[1]))
console.log(data)
main()

function main() {
  var { isIOS, isAndroid } = browserSystem
  console.log(isIOS, isAndroid)
  if (isIOS || isAndroid) {
    for (var i = 0; i < DOM.icon.length; i++) {
      DOM.icon[i].src = require(`../images/${data.appId}/icon.png`)
    }

    for (var i = 0; i < DOM.name.length; i++) {
      DOM.name[i].innerHTML = data.fileName
    }

    for (var i = 0; i < DOM.clickHere.length; i++) {
      DOM.clickHere[i].innerHTML = config.CN.click
    }

    for (var i = 0; i < DOM.txtComplete.length; i++) {
      DOM.txtComplete[i].innerHTML = config.CN.txtComplete
    }

    for (var i = 0; i < DOM.topUrl.length; i++) {
      DOM.topUrl[i].innerHTML = data.link
    }

    DOM.clickHereAdd.innerHTML = config.CN.add
    DOM.clickHereAdd2.innerHTML = config.CN.add2

    if (isIOS) {
      sliders = installIOS()
    } else {
      sliders = installAndroid()
    }
    // animation(3)
    animationInit()
  }

  if (!isIOS && !isAndroid) {
    location.href = `http://sdk-sg.pocketgamesol.com/platform/shortcut.jsp?link=${data.link}&fileName=${data.fileName}`
  }

}

function installIOS() {
  DOM.desc.innerHTML = config.CN.guild.ios
  DOM.ios.sliders.style.display = 'block'
  var bgImg = require(`../images/${data.appId}/ios/bg.jpg`)
  for (var i = 0; i < DOM.ios.bg.length; i++) {
    DOM.ios.bg[i].src = bgImg
  }

  return DOM.ios.sliders
}

function installAndroid() {
  DOM.desc.innerHTML = config.CN.guild.android
  DOM.android.sliders.style.display = 'block'
  var bgImg = require(`../images/${data.appId}/android/bg.jpg`)
  for (var i = 0; i < DOM.android.bg.length; i++) {
    DOM.android.bg[i].src = bgImg
  }

  return DOM.android.sliders
}

var interval
var max = 3
var index = 0
var sliders
var scrolling = false

function animationInit() {
  interval = setInterval(function () {
    animation(index + 1)
  }, 3000)
}

function animation(_index, cb?) {
  scrolling = true
  anime({
    targets: sliders,
    translateX: (function () {
      if (_index > max) {
        _index = 0
      }
      return _index * -25 + '%'
    })(),
    duration: 100,
    complete: function () {
      setTimeout(function () {
        scrolling = false
      }, 500)
      index = _index
      cb && cb()

      for (var i = 0; i < DOM.balls.length; i++) {
        var ball = DOM.balls[i]
        if (index === i) {
          !ball.classList.contains('cur') && ball.classList.add('cur')
        } else {
          ball.classList.contains('cur') && ball.classList.remove('cur')
        }
      }
    }
  });
}

function manualScroll({ direction }) {
  if (direction === 2) { // 往左滑动 index++
    if (index >= max) {
      clearInterval(interval)
      animation(max, function () {
        animationInit()
      })
      return
    } else {
      clearInterval(interval)
      animation(index + 1, function () {
        animationInit()
      })
    }
  } else if (direction === 4) { // 往右滑动
    if (index === 0) {
      clearInterval(interval)
      animation(0, function () {
        animationInit()
      })
      return
    } else {
      clearInterval(interval)
      animation(index - 1, function () {
        animationInit()
      })
    }
  }
}

var hammer = new Hammer(DOM.slides, {
  event: 'swipe',
  threshold: 20
})

hammer.on('swipeleft', function (e) {
  if (scrolling === false) manualScroll({ direction: 2 })
});
hammer.on('swiperight', function (e) {
  if (scrolling === false) manualScroll({ direction: 4 })
});
